<template>
  <div class="aui-wrapper aui-page__login"  >
    <div class="line" ></div>
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
      <el-menu-item index="1"><a href="http://127.0.0.1:8001/#/loginIndex" target="_blank">登录</a></el-menu-item>
    </el-menu>
    <template>
      <el-carousel indicator-position="outside" align="center" height="400px" >
        <el-carousel-item v-for="item in imgPathList1" :key="item">
          <h3>{{ item.fileType }}</h3>
          <el-image :src="item.filePath" ></el-image>
        </el-carousel-item>
      </el-carousel>
    </template>
    <el-row>
      <el-col :span="8" v-for="item in data" :key="item" :offset="item">
        <img :src="item.path==null?'src/views/pages/dd051815ad63f7a9b23ee86b9c5fb25.png':item.path" class="image" height="350px" width="250px">
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px;">
            <div class="bottom clearfix">
              <time class="time">民宿名称: {{ item.location}}</time>
            </div>
            <time class="time">简介: {{ item.briefIntroduction}}</time>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style>
.el-carousel__item a {
  color: #ffffff;
  font-size: 30px;
  opacity: 3;
  line-height: 100px;
  margin: 0;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
<script>

export default {
  mounted () {
    this.searchAll();
    this.searchAllHome();
  },
  data() {
    return {
      imgPathList1:[],
      activeIndex: '1',
      activeIndex2: '1',
      data:[],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    searchAll: function () {
      this.$http.get(`/biz/filestore/getPathList`).then(
          ({data: res}) => {
            this.imgPathList1 = res
          })
    },
    searchAllHome: function () {
      this.$http.get(`/biz/homestayinformation/searchAllByDeptId`).then(
          ({data: res}) => {
            this.data = res.data
          })
    },
  }
}
</script>